<template>
<div id="ZS_Order">
  <van-tabs style="flex-shrink: 0;" @change="onSearch()" v-model="active" inverse indicator-color="#2196F3" color="#2196F3" 
    text-color="rgba(0, 0, 0, 0.54)" center :swipe-threshold="5">
    <van-tab :title="`租借中(${ status[0] || 0 })`"></van-tab>
    <van-tab :title="`已归还(${ status[1] || 0 })`"></van-tab>
    <!-- <van-tab :title="`超时订单(${ status[3] || 0 })`"></van-tab> -->
  </van-tabs>
  <van-dropdown-menu>
    <van-dropdown-item v-model="chargeStatus" :options="chargeOption" @change="chargeStatusChange"/>
  </van-dropdown-menu>
  <van-search v-model="searchValue" placeholder="请输入订单编号" show-action shape="round">        
    <div slot="action" @click="onSearch" class="ft-blue">搜索</div>
  </van-search>
  <div class="flex-body">
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList">
      <div class="tongji-box" v-for="(item, index) in list" :key="index" @click="showBlank( item )">
        <div class="tongji-item">
          <div class="tongji-row" style="height: 1.2rem;">
            <img :src="item.icon" style="width: 1rem; height: 1rem;"/>
            <div>
              {{ item.nick }}
            </div>
          </div>
          <div class="tongji-row">
            <div>订单编号：</div>
            <div>{{ item.orderId }}{{item.shopDisplay == 1 ? '*' : ''}}</div>
          </div>
          <div class="tongji-row">
            <div>费用：</div>
            <div>{{ item.realExpense || item.realExpense == 0 ? item.realExpense+'元' : order[ item.orderStatus ] }}</div>
          </div>
          <div class="tongji-row" v-if="item.payTime">
            <div>付款时间：</div>
            <div>{{ item.payTime }}</div>
          </div>
          <div class="tongji-row" v-if="item.refundMoney">
            <div>退款金额：</div>
            <div>{{ item.refundMoney }}元</div>
          </div>
          <div class="tongji-row">
            <div>租借地点：</div>
            <div class="ft-blue">{{ item.shopName }}</div>
          </div>
          <div class="tongji-row">
            <div>租借时间：</div>
            <div>{{ item.rentTime }}</div>
          </div>
        </div>
      </div>
    </van-list>
  </div>  
  
  <van-popup v-model="blank.show"
   position="bottom" :style="{ height: '100%' }">
    <div class="page-blank">
      <van-nav-bar title="订单详情" left-arrow @click-left="blank.show = false"/>
      <van-cell-group>
        <van-field readonly label="租借地点"   :value="info.shopName"/>
        <van-field readonly label="租借时间"   :value="info.rentTime"/>
        <van-field readonly label="归还时间"   :value="info.returnTime || order[ info.orderStatus ]"/>
        <van-field readonly label="归还地点"   :value="info.returnShopId"/>
        <van-field readonly label="租借设备sn" :value="info.equipmentNum"/>
        <van-field readonly label="归还设备sn" :value="info.returnEquipmentSn"/>
        <van-field readonly label="应付金额"   :value="info.shouldExpense || info.shouldExpense == 0 ? info.shouldExpense + '￥' : order[ info.orderStatus ]"/>
        <van-field readonly label="实付金额"   :value="info.realExpense || info.realExpense == 0 ? info.realExpense + '￥' : order[ info.orderStatus ]"/>
        <van-field readonly label="订单编号"   :value="info.orderId"/>
        <van-field readonly label="充电宝编号" :value="info.chargerSn"/>
        <van-field readonly label="订单状态"   :value="order[ info.orderStatus ]"/>
        <van-field readonly label="付费状态"   :value="charge[ info.chargeStatus ]"/>
      </van-cell-group>
    </div>
  </van-popup>

  <van-dialog v-model="showTuikuan.blank" title="退款" show-cancel-button @confirm="submitTuikuan">
    <van-cell-group>
      <van-field v-model="showTuikuan.money" placeholder="请输入" label="退款金额"/>
    </van-cell-group>
  </van-dialog>
</div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import axios from '@/utils/request';

@Component
export default class ZS_Order extends Vue {
  
  chargeStatus: string = ''
  chargeOption: any = [
    { text: '全部订单', value: '' },
    { text: '未付款', value: 0 },
    { text: '待支付', value: 1 },
    { text: '已付款', value: 2 },
    { text: '退款', value: 3 }
  ]
  chargeStatusChange() {
    this.page = 1
    this.list = [];
    this.loading = true;
    this.finished = false;
    this.getList();
  }

  active: any = 0  
  status: any = []
  showChaoshi: boolean = false
  order: any = [ '租借中', '已归还', '已撤销', '超时' ]
  charge: any = [ '未付款', '待支付', '已付款', '退款' ]

  list: any = []

  loading: boolean = false
  finished: boolean = false
  page: any = 1
  searchValue: any = ''
  
  getList() {
    let page = this.page, size = 10, orderStatus = this.active, findSubordinate = true;
    let chargeStatus = this.chargeStatus, orderNum = this.searchValue;
    axios.get('/api/orderFormController/manageOrder', { page, size, findSubordinate, orderStatus, chargeStatus, orderNum }).then((res: any) => {
      if(this.active != orderStatus) return ;
      let json = res || {}; 
      let list = json.list || [];
      this.page = page + 1;
      this.loading = false;
      this.list.push( ...list );
      if(json.isLastPage) this.finished = true;
    }).catch((err: any) => {
      this.loading = false;
      this.finished = true;
    });
  }

  tuikuan(item: any) {    
    this.showTuikuan.orderId = item.orderId;
    this.showTuikuan.money = '';
    this.showTuikuan.blank = true;
  }

  quxiao(item: any) {    
    this.$dialog.confirm({ 
      message: `取消功能是为了充电宝损坏，业务员取回充电宝设置的，擅自给用户取消订单会导致丢失充电宝，确定要取消该订单吗？`,       
    }).then(() => {
      axios.post(`/api/orderFormController/cancelOrder`, { query: { orderId: item.orderId } }).then((res: any) => {
        this.$toast('退款成功');
        this.onSearch();
      });
    })
  }

  onSearch() {
    this.page = 1;
    this.list = [];
    this.finished = false;
    this.loading = true;
    this.$router.replace({ name: this.$route.name, query: { active: this.active } });
    this.getList();
  }

  blank: any = {
    show: false,
    list: []
  }
  info: any = {}
  showBlank(item: any) {
    this.info = JSON.parse( JSON.stringify( item ) );
    this.blank.show = true;   
  }

  showTuikuan: any = {
    blank: false,
    orderId: '',
    money: ''
  }
  submitTuikuan() {
    if( this.showTuikuan.money ) {
      axios.post(`/api/borrow/refundOrderByPayOrderId/${ this.showTuikuan.orderId }?money=${ this.showTuikuan.money }`).then((res: any) => {
        this.$toast('退款成功');
        this.onSearch();
      });
    } else {
      this.$toast('请输入正确的金额');
    }
  }

  created() {
    if(this.$route.query.active) this.active = Number(this.$route.query.active);
    axios.get('/api/orderFormController/manageOrderNum').then((res: any) => {
      this.status = res || [];
    });
  }
  
};
</script>

<style lang="scss">
#ZS_Order {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>

